import styled from './index.module.scss'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {Button, ColProps, Form, Input, message, Radio, Upload, UploadFile} from 'antd'
import {delImage, userGetImage, userQuery, userUpdate} from '@/api'
import {PersonalDataForm, PersonalDataRules} from '@/type/personalData'
import config from '@/static/config'
import {info} from '@/utils'
import {PlusOutlined} from '@ant-design/icons'

const title = [
	{
		name: '基本资料'
	},
	{
		name: '头像照片'
	}
]

const {Item, useForm} = Form

const {Group} = Radio

const labelCol:ColProps = {
	span: 4
}
const wrapperCol: ColProps = {
	offset: 1,
	span: 6
}

const FormInfo = (props: {
	click: () => void
}) => {
	const [form] = useForm()
	const [formModal, setFormModal] = useState<PersonalDataForm>()

	useEffect(() => {
		userQuery().then(res => {
			if (res.code === 200) {
				setFormModal(res.data)
				form.setFieldsValue(res.data)
			}
		})
	}, [])


	const formFinish = (values: {
		phone: string,
		sex: string
		username: string
	}) => {
		userUpdate({
			...values,
			id: info()!.id
		}).then(res => {
			if (res.code === 200) {
				message.success(res.message)
			}
		})
	}

	const formMemo = useMemo(() => {
		return (
			<div className={styled.form}>
				<Form
					form={form}
					initialValues={formModal!}
					wrapperCol={wrapperCol}
					labelCol={labelCol}
					onFinish={formFinish}
				>
					<Item label={'头像'}>
						<div className={styled.form_img}>
							<img width={180} height={180} src={formModal?.pic ? config.userImgUrl + formModal?.pic : ''} alt=""/>
							<div onClick={props.click}>修改头像</div>
						</div>
					</Item>
					<Item label={'名称'} name="username" rules={PersonalDataRules.username}>
						<Input></Input>
					</Item>
					<Item label={'联系电话'} name="phone" rules={PersonalDataRules.phone}>
						<Input></Input>
					</Item>
					<Item label={'性别'} name="sex" rules={PersonalDataRules.sex}>
						<Group>
							<Radio value={'1'}>男</Radio>
							<Radio value={'0'}>女</Radio>
						</Group>
					</Item>
					<Item>
						<Button htmlType={'submit'}>保存</Button>
					</Item>
				</Form>
			</div>
		)
	}, [formModal])

	return formMemo
}

const IMG = () => {
	const [img, setImg] = useState<UploadFile[]>([])



	useEffect(() => {
		getList()
	}, [])

	function getList () {
		userGetImage().then(res => {
			if (res.code === 200 && res.data.pic) {
				// setImg(res.data.pic)
				setImg([{
					uid: '-1',
					name: 'image.png',
					status: 'done',
					url: config.userImgUrl + res.data.pic
				},])
			}
		})
	}

	const remove = (file:UploadFile) => {
		const urlIndex = file.url?.lastIndexOf("/")
		if (urlIndex) {
			const pic = file.url?.substring(urlIndex + 1, file.url?.length)
			return delImage({
				pic
			}).then(res => {
				if (res.code === 200) {
					setImg([])
					return false
				}
			})
		}
		return true
	}

	const imgChange = () => {
		getList()
	}

	return (
		<div>
			<Upload
				name="file"
				action={config.url + 'sms/user/image'}
				listType="picture-card"
				headers={{
					token: sessionStorage.getItem('token')!
				}}
				fileList={img}
				maxCount={1}
				onRemove={remove}
				onChange={imgChange}
			>
				{
					img.length ? "" : <PlusOutlined />
				}
			</Upload>
		</div>
	)
}

const PersonalData = () => {
	const [active, setActive] = useState<number>(0)


	const click = useCallback(() => {
		console.log(123456)
		setActive(1)
	},[active])

	const body = useMemo(() => {
		if (active === 0) {
			return <FormInfo click={click}></FormInfo>
		}
		if (active === 1) {
			return <IMG></IMG>
		}
	}, [active])

	return (
		<div className={styled.personalData}>
			<div className={styled.personalData_title}>
				{
					title.map((item, index) => (
						<div key={index}>
							<span
								onClick={() => setActive(index)}
								className={active === index ? styled.active : styled.spanHover}
							>{item.name}</span>
						</div>
					))
				}
			</div>
			<div className={styled.personalData_body}>
				{body}
			</div>
		</div>
	)
}


export default PersonalData
